<template>
  <div class="bg">
    <div class="bgImg">
      <div class="timeFrame">
        {{ nowDate + " " + nowTime + " " + nowWeek }}
      </div>
      <div class="conHead">
        <!-- <img class="head" src="~@/assets/intell/head.png" alt="" />
        <span class="headName">{{ name }}</span> -->
      </div>
      <!-- <div class="conBtn">
        <img class="logoutImg" src="~@/assets/intell/logout.png" alt="" />
        <span class="logoutBtn">退出</span>
      </div> -->
      <span class="country" @click="goCountry()">国家智能社会治理</span>
      <span class="country1" @click="goCountry()">实验基地科研数据中台</span>
      <span class="serve" @click="goServe()">太极统一服务总线平台(USB3.0)</span>
      <span class="monitor" @click="goMonitor()">极易监控平台1.0</span>
      <span class="doorRiver" @click="goDoorRiver()"
        >极易数据湖资源门户1.0</span
      >
      <span class="terraceRiver" @click="goTerrace()"
        >极易数据湖管理平台1.0</span
      >
      <span class="TaiJi" @click="goHeTuMenhu()">太极河图4.0可视化平台</span>
      <span class="dataBank" @click="goHeTuSystem()">太极河图4.0管理平台</span>

      <div class="countryBg" @click="goCountry()"></div>
      <div class="serveBg" @click="goServe()"></div>
      <div class="monitorBg" @click="goMonitor()"></div>
      <div class="doorRiverBg" @click="goDoorRiver()"></div>
      <div class="terraceRiverBg" @click="goTerrace()"></div>
      <div class="TaiJiBg" @click="goHeTuMenhu()"></div>
      <div class="dataBankBg" @click="goHeTuSystem()"></div>

      <div class="pictureInsert"></div>
      <div class="pictureInsert1"></div>

      <div class="title">国家智能社会治理实验基地科研数据中台</div>

      <div class="kuang">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nowDate: "", // 当前日期
      nowTime: "",
      nowWeek: "",
    };
  },
  mounted() {
    this.currentTime();
  },
  methods: {
    currentTime() {
      setInterval(this.getDate, 500);
    },
    getDate() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let week = new Date().getDay();
      let hh = new Date().getHours();
      let ms =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      if (week == 1) {
        this.nowWeek = "星期一";
      } else if (week == 2) {
        this.nowWeek = "星期二";
      } else if (week == 3) {
        this.nowWeek = "星期三";
      } else if (week == 4) {
        this.nowWeek = "星期四";
      } else if (week == 5) {
        this.nowWeek = "星期五";
      } else if (week == 6) {
        this.nowWeek = "星期六";
      } else {
        this.nowWeek = "星期日";
      }
      _this.nowTime = hh + ":" + mf + ":" + ms;
      _this.nowDate = yy + "年" + mm + "月" + dd + "日";
    },
    goCountry() {
      window.open("http://120.46.137.231:10081/");
    },
    goServe() {
      window.open("http://120.46.204.58:19020/");
    },
    goMonitor() {
      window.open("http://120.46.223.41:19070/");
    },
    goDoorRiver() {
      window.open("http://121.36.101.133:19040/datalake-catalogue");
    },
    goTerrace() {
      window.open("http://121.36.101.133:19050/");
    },
    goHeTuSystem() {
      window.open("http://114.116.245.91:19060/admin/index.html");
    },
    goHeTuMenhu() {
      window.open("http://114.116.245.91:19060/");
    },
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.getDate) {
      console.log("销毁定时器");
      clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100vh;
}
.bgImg {
  background: url("~@/assets/intell/bg.jpg") center center no-repeat;
  width: 10rem /* 2560/256 */;
  height: 6.25rem /* 1600/256 */;
  background-size: 100% 100%;
  z-index: 0;
  position: relative;
  .kuang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
  }
  .bubble {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: inset 0 0 8px blue;
    animation: flutter 10s infinite;
    opacity: 0;
  }
  @keyframes flutter {
    0% {
      transform: translateX(0);
      bottom: -100px;
      opacity: 1;
    }
    50% {
      transform: translateX(100px);
      opacity: 0.5;
    }

    100% {
      transform: translateX(0px);
      bottom: 100%;
      opacity: 0;
    }
  }

  bubble:nth-child(1) {
    left: -10%;
    width: 50px;
    height: 50px;
    animation-duration: 9s;
    animation-delay: 0.1s;
  }
  .bubble:nth-child(2) {
    left: 15%;
    width: 20px;
    height: 20px;
    animation-duration: 6s;
    animation-delay: 1.5s;
  }
  .bubble:nth-child(3) {
    left: 20%;
    width: 60px;
    height: 60px;
    animation-duration: 10s;
  }
  .bubble:nth-child(4) {
    left: 30%;
    width: 30px;
    height: 30px;
    animation-duration: 5.5s;
    animation-delay: 1.5s;
  }
  .bubble:nth-child(5) {
    left: 40%x;
    width: 50px;
    height: 50px;
    animation-duration: 12s;
  }
  .bubble:nth-child(6) {
    left: 50%;
    width: 20px;
    height: 20px;
    animation-duration: 6s;
    animation-delay: 1s;
  }
  .bubble:nth-child(7) {
    left: 60%;
    width: 40px;
    height: 40px;
    animation-duration: 8s;
    animation-delay: 1s;
  }
  .bubble:nth-child(8) {
    left: 65%;
    width: 60px;
    height: 60px;
    animation-duration: 15s;
  }
  .bubble:nth-child(9) {
    left: 80%;
    width: 55px;
    height: 55px;
    animation-duration: 9s;
    animation-delay: 0.5s;
  }
  .bubble:nth-child(10) {
    left: 100%;
    width: 40px;
    height: 40px;
    animation-duration: 12s;
  }

  .title {
    font-size: 0.15625rem /* 40/256 */;
    font-weight: 700;
    color: #fff;
    position: absolute;
    bottom: 5.859375rem /* 1500/256 */;
    left: 0.234375rem /* 60/256 */;
  }
  .country {
    // transform-style: preserve-3d;
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 2.382813rem /* 610/256 */;
    left: 4.21875rem /* 1080/256 */;
    width: 1.484375rem /* 380/256 */;
  }
  .country1 {
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 2.167969rem /* 555/256 */;
    left: 4.21875rem /* 1080/256 */;
    width: 1.484375rem /* 380/256 */;
  }
  .serve {
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 1.894531rem /* 485/256 */;
    left: 1.074219rem /* 275/256 */;
    transform: rotateX(-50deg) rotateY(38deg) scale(1.04);
    width: 1.074219rem /* 275/256 */;
  }
  .monitor {
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 2.539063rem /* 650/256 */;
    left: 2.304688rem /* 590/256 */;
    transform: rotateX(-50deg) rotateY(38deg) scale(1.04);
    width: 0.566406rem /* 145/256 */;
  }
  .doorRiver {
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 3.164063rem /* 810/256 */;
    left: 3.007813rem /* 770/256 */;
    transform: rotateX(-50deg) rotateY(38deg) scale(1.04);
    width: 0.976563rem /* 250/256 */;
  }
  .terraceRiver {
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 3.125rem /* 800/256 */;
    left: 6.054688rem /* 1550/256 */;
    transform: rotateX(-50deg) rotateY(-38deg) scale(1.04);
    width: 0.976563rem /* 250/256 */;
  }
  .TaiJi {
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 2.617188rem /* 670/256 */;
    left: 7.03125rem /* 1800/256 */;
    transform: rotateX(-50deg) rotateY(-38deg) scale(1.04);
    width: 0.78125rem /* 200/256 */;
  }
  .dataBank {
    color: #fff;
    font-size: 0.132813rem /* 34/256 */;
    text-align: center;
    line-height: 0.1875rem /* 48/256 */;
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 1px 0px #a0a0a0,
      0px 1px 0px #909090, 0px 1px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: absolute;
    bottom: 1.992188rem /* 510/256 */;
    left: 7.96875rem /* 2040/256 */;
    transform: rotateX(-50deg) rotateY(-38deg) scale(1.04);
    width: 0.78125rem /* 200/256 */;
  }
}
.countryBg {
  cursor: pointer;
  background: url("~@/assets/intell/center.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 2.65625rem /* 680/256 */;
  left: 4.140625rem /* 1060/256 */;
  width: 1.71875rem /* 440/256 */;
  height: 1.757813rem /* 450/256 */;
  animation: mymove 1.5s infinite;
  background-size: 100% 100%;
}
.serveBg {
  cursor: pointer;
  background: url("~@/assets/intell/6.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 2.246094rem /* 575/256 */;
  left: 1.015625rem /* 260/256 */;
  width: 0.859375rem /* 220/256 */;
  height: 0.9375rem /* 240/256 */;
  animation: mymove 1.5s infinite;
  background-size: 100% 100%;
}
.monitorBg {
  cursor: pointer;
  background: url("~@/assets/intell/5.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  left: 1.953125rem /* 500/256 */;
  bottom: 2.929688rem /* 750/256 */;
  width: 0.859375rem /* 220/256 */;
  height: 0.9375rem /* 240/256 */;
  animation: mymove 1.5s infinite;
  background-size: 100% 100%;
}
.doorRiverBg {
  cursor: pointer;
  background: url("~@/assets/intell/4.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 3.710938rem /* 950/256 */;
  left: 2.851563rem /* 730/256 */;
  width: 0.859375rem /* 220/256 */;
  height: 0.9375rem /* 240/256 */;
  animation: mymove 1.5s infinite;
  background-size: 100% 100%;
}
.terraceRiverBg {
  cursor: pointer;
  background: url("~@/assets/intell/3.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 3.632813rem /* 930/256 */;
  left: 6.289063rem /* 1610/256 */;
  width: 0.859375rem /* 220/256 */;
  height: 0.9375rem /* 240/256 */;
  animation: mymove 1.5s infinite;
  background-size: 100% 100%;
}
.TaiJiBg {
  cursor: pointer;
  background: url("~@/assets/intell/2.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 2.929688rem /* 750/256 */;
  left: 7.1875rem /* 1840/256 */;
  width: 0.859375rem /* 220/256 */;
  height: 0.9375rem /* 240/256 */;
  animation: mymove 1.5s infinite;
  background-size: 100% 100%;
}
.dataBankBg {
  cursor: pointer;
  background: url("~@/assets/intell/1.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 2.304688rem /* 590/256 */;
  left: 8.125rem /* 2080/256 */;
  width: 0.859375rem /* 220/256 */;
  height: 0.9375rem /* 240/256 */;
  animation: mymove 1.5s infinite;
  background-size: 100% 100%;
}

@keyframes mymove {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, -10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.pictureInsert {
  background: url("~@/assets/intell/bg1.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 2.539063rem /* 650/256 */;
  left: 3.828125rem /* 980/256 */;
  width: 0.390625rem /* 100/256 */;
  height: 0.390625rem /* 100/256 */;
  animation: heart 2.6s infinite;
  background-size: 100% 100%;
}
.pictureInsert1 {
  background: url("~@/assets/intell/bg2.png") center center no-repeat;
  z-index: 99;
  position: absolute;
  bottom: 1.953125rem /* 500/256 */;
  left: 5.664063rem /* 1450/256 */;
  width: 0.3125rem /* 80/256 */;
  height: 0.3125rem /* 100/256 */;
  animation: heart 2.6s infinite;
  background-size: 100% 100%;
}
@keyframes heart {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-2deg);
  }

  60% {
    transform: rotate(0);
  }

  80% {
    transform: rotate(2deg);
  }

  100% {
    transform: rotate(0);
  }
}
.conHead {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.03125rem /* 8/256 */;
  left: 9.023438rem /* 2310/256 */;
  top: 0.078125rem /* 20/256 */;
  position: absolute;
  border-right: 0.007813rem /* 2/256 */ solid #fff;
  .headName {
    font-weight: 400;
    font-size: 0.0625rem /* 16/256 */;
    line-height: 0.09375rem /* 24/256 */;
    color: #fff;
  }
}
.conBtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.03125rem /* 8/256 */;
  left: 9.625rem /* 2464/256 */;
  top: 0.078125rem /* 20/256 */;
  position: absolute;
  min-width: 0.28125rem /* 72/256 */;
  .logoutBtn {
    font-weight: 400;
    font-size: 0.0625rem /* 16/256 */;
    line-height: 0.09375rem /* 24/256 */;
    color: #fff;
  }
}
.logoutImg .head {
  width: 0.125rem /* 32/256 */;
  height: 0.125rem /* 32/256 */;
}

.timeFrame {
  left: 8.3132rem /* 2200/256 */;
  top: 0.078125rem /* 20/256 */;
  position: absolute;
  font-size: 0.078125rem /* 20/256 */;
  font-weight: bold;
  padding-top: 0.063438rem /* 6/256 */;
  color: #fff;
}
</style>
